import { useParams, Link } from 'react-router-dom';
import { useEffect } from 'react';
import { ChevronRight, Clock, BookOpen, ArrowRight } from 'lucide-react';
import { setPageTitle } from '../lib/utils';

export function WellnessGuideDetail() {
  const {
    guideId
  } = useParams();
  // Mock wellness guides data
  const guides = [{
    id: 'guide-001',
    title: 'Morning Ritual Guide',
    subtitle: 'Start your day with intention and mindfulness',
    description: 'Start your day with intention and mindfulness. This guide walks you through a complete morning ritual for balance and energy.',
    image: 'https://images.unsplash.com/photo-1515377905703-c4788e51af15?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    author: 'Elise Taylor',
    authorTitle: 'Founder & Wellness Expert',
    authorImage: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80',
    readTime: '8 min read',
    publishDate: 'June 15, 2023',
    content: [{
      type: 'paragraph',
      text: 'The way you start your morning sets the tone for your entire day. By creating a mindful morning ritual, you can cultivate a sense of calm, purpose, and joy that carries you through whatever challenges arise. This guide will walk you through creating a morning ritual that nourishes your body, mind, and spirit.'
    }, {
      type: 'heading',
      text: 'The Science Behind Morning Rituals'
    }, {
      type: 'paragraph',
      text: 'Research shows that how we spend our first hour awake has a significant impact on our mood, productivity, and stress levels throughout the day. Morning rituals help regulate our circadian rhythm, reduce cortisol levels, and prime our brains for positive thinking and focused attention.'
    }, {
      type: 'heading',
      text: 'Creating Your Perfect Morning Ritual'
    }, {
      type: 'paragraph',
      text: 'Your morning ritual should be personalized to your needs and preferences. However, the following elements form a solid foundation that you can adapt to create your own perfect morning.'
    }, {
      type: 'subheading',
      text: '1. Mindful Awakening (5 minutes)'
    }, {
      type: 'paragraph',
      text: 'Instead of reaching for your phone the moment you wake up, take a few minutes to set a positive intention for the day. Stretch gently in bed, taking deep breaths and expressing gratitude for the new day. This simple practice helps transition your body and mind from sleep to wakefulness with awareness rather than urgency.'
    }, {
      type: 'subheading',
      text: '2. Hydration Ritual (2 minutes)'
    }, {
      type: 'paragraph',
      text: 'After 7-8 hours without water, your body needs hydration. Drink a full glass of room temperature water, perhaps with a squeeze of lemon for added benefits. This simple act jumpstarts your metabolism, flushes toxins, and rehydrates your body after sleep.'
    }, {
      type: 'subheading',
      text: '3. Movement Practice (10-20 minutes)'
    }, {
      type: 'paragraph',
      text: 'Gentle movement in the morning helps wake up your body, improve circulation, and boost your mood through the release of endorphins. This could be a short yoga sequence, a brisk walk outside, or simple stretching exercises. The key is consistency rather than intensity.'
    }, {
      type: 'subheading',
      text: '4. Mindfulness Practice (5-10 minutes)'
    }, {
      type: 'paragraph',
      text: "Taking even just five minutes to meditate, practice breathwork, or journal can center your mind and set a positive tone for the day. Focus on your breath, scan your body for tension, or write down three things you're grateful for."
    }, {
      type: 'subheading',
      text: '5. Nourishing Breakfast (15 minutes)'
    }, {
      type: 'paragraph',
      text: 'Prepare and eat a nutritious breakfast mindfully, without distractions from screens or reading material. Notice the flavors, textures, and sensations of eating. A balanced breakfast with protein, healthy fats, and complex carbohydrates provides sustained energy throughout the morning.'
    }, {
      type: 'subheading',
      text: '6. Skincare Ritual (5-10 minutes)'
    }, {
      type: 'paragraph',
      text: 'Transform your morning skincare routine into a ritual of self-care. Be present as you cleanse, tone, and moisturize your skin. Use products that not only benefit your skin but also delight your senses with pleasant textures and natural scents.'
    }, {
      type: 'heading',
      text: 'Tips for Maintaining Your Morning Ritual'
    }, {
      type: 'list',
      items: ['Start small – begin with just one or two elements and gradually build your ritual', 'Prepare the night before – set out your exercise clothes, prepare breakfast ingredients, etc.', 'Wake up 30 minutes earlier to avoid rushing', 'Be consistent but flexible – adapt your ritual to different circumstances', 'Focus on how it makes you feel, not just checking boxes', 'Avoid digital distractions for the first hour of your day if possible']
    }, {
      type: 'paragraph',
      text: 'Remember that the purpose of a morning ritual is not to add more to your to-do list, but to bring more intention, joy, and wellbeing to your day. Even just 15 minutes of mindful morning activities can transform how you experience the rest of your waking hours.'
    }],
    relatedProducts: [{
      id: 'sk-002',
      title: 'Vitamin C Brightening Serum',
      brand: 'Glow Theory',
      image: 'https://images.unsplash.com/photo-1576426863848-c21f53c60b19?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      rating: 4.7,
      reviewCount: 89,
      price: 52.0,
      category: 'Skincare'
    }, {
      id: 'wl-002',
      title: 'Relaxation Tea Blend',
      brand: 'Ritual Beauty',
      image: 'https://images.unsplash.com/photo-1563911892437-1feda0179e1b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      rating: 4.7,
      reviewCount: 64,
      price: 24.0,
      category: 'Wellness'
    }, {
      id: 'sk-004',
      title: 'Green Tea Cleansing Oil',
      brand: 'Ritual Beauty',
      image: 'https://images.unsplash.com/photo-1595348020949-87cdfbb44174?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      rating: 4.6,
      reviewCount: 53,
      price: 34.0,
      category: 'Skincare'
    }]
  }, {
    id: 'guide-002',
    title: 'Facial Massage Techniques',
    subtitle: 'Ancient wisdom for modern beauty',
    description: 'Learn the art of facial massage for lymphatic drainage, reduced puffiness, and a natural glow.',
    image: 'https://images.unsplash.com/photo-1519823551278-64ac92734fb1?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    author: 'Sofia Lindström',
    authorTitle: 'Skincare Specialist',
    authorImage: 'https://images.unsplash.com/photo-1534751516642-a1af1ef26a56?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80',
    readTime: '10 min read',
    publishDate: 'May 28, 2023',
    content: [{
      type: 'paragraph',
      text: 'Facial massage is an ancient practice that has been used across cultures for centuries to promote beauty, relaxation, and wellbeing. Today, modern science confirms what traditional wisdom has long known: regular facial massage can improve circulation, reduce puffiness, promote lymphatic drainage, and even help reduce the appearance of fine lines and wrinkles.'
    }, {
      type: 'heading',
      text: 'Benefits of Regular Facial Massage'
    }, {
      type: 'paragraph',
      text: 'When incorporated into your skincare routine, facial massage offers numerous benefits:'
    }, {
      type: 'list',
      items: ['Stimulates blood circulation, bringing oxygen and nutrients to skin cells', 'Promotes lymphatic drainage to reduce puffiness and toxin buildup', 'Relaxes facial muscles to release tension that can lead to wrinkles', 'Enhances product absorption for more effective skincare', 'Provides a moment of mindful self-care and stress reduction', 'Helps maintain skin elasticity and tone over time']
    }, {
      type: 'heading',
      text: 'Essential Techniques'
    }, {
      type: 'subheading',
      text: 'Preparation'
    }, {
      type: 'paragraph',
      text: 'Begin with clean hands and a cleansed face. Apply a facial oil or serum to provide slip and prevent pulling on the skin. Take a moment to breathe deeply and set an intention for your practice.'
    }, {
      type: 'subheading',
      text: '1. Lymphatic Drainage Technique'
    }, {
      type: 'paragraph',
      text: 'This gentle technique helps reduce puffiness by encouraging lymph fluid to move toward drainage points. Using very light pressure with your fingertips, start at the center of your face and make sweeping motions outward and downward toward your lymph nodes (under your ears, along your jawline, and at your collarbones).'
    }, {
      type: 'subheading',
      text: '2. Lifting and Sculpting Technique'
    }, {
      type: 'paragraph',
      text: 'Using your knuckles or the pads of your fingers, apply medium pressure in upward and outward strokes. Start from the center of your chin, moving along your jawline toward your ears. Continue with upward strokes on your cheeks, and from your eyebrows up toward your hairline. This technique helps counteract the downward pull of gravity on facial tissues.'
    }, {
      type: 'subheading',
      text: '3. Pressure Point Technique'
    }, {
      type: 'paragraph',
      text: 'Gently press and hold specific points on your face for 5-10 seconds each. Key points include the temples, the bridge of the nose, under the cheekbones, and along the jawline. This technique helps release tension and can provide relief from headaches and jaw tension.'
    }, {
      type: 'subheading',
      text: '4. Gua Sha Technique'
    }, {
      type: 'paragraph',
      text: 'Using a smooth jade or rose quartz tool, gently scrape along the contours of your face in upward and outward motions. Hold the tool flat against your skin at a 15-degree angle. This ancient Chinese technique promotes circulation, reduces puffiness, and helps define facial contours.'
    }, {
      type: 'heading',
      text: 'Creating Your Facial Massage Ritual'
    }, {
      type: 'paragraph',
      text: 'For best results, incorporate facial massage into your skincare routine 2-3 times per week. A complete session can take as little as 5 minutes or be extended to 15-20 minutes for a more luxurious experience.'
    }, {
      type: 'paragraph',
      text: 'Morning facial massage can help reduce puffiness and prepare your skin for the day, while evening massage can release tension accumulated throughout the day and enhance the absorption of your nighttime skincare products.'
    }, {
      type: 'heading',
      text: 'Tips for Effective Practice'
    }, {
      type: 'list',
      items: ['Always use a facial oil or serum to provide slip and prevent pulling on delicate skin', 'Be gentle, especially around the eye area – more pressure is not more effective', 'Stay consistent with your practice to see cumulative benefits', 'Drink plenty of water after massage to help flush toxins', 'Clean your tools regularly if using facial rollers or gua sha stones', 'Listen to your skin and adjust pressure and frequency accordingly']
    }, {
      type: 'paragraph',
      text: "By incorporating these facial massage techniques into your regular skincare ritual, you're not only enhancing your natural beauty but also creating a moment of mindful self-care in your day. The combination of physical benefits and the meditative quality of the practice makes facial massage a truly holistic approach to beauty and wellbeing."
    }],
    relatedProducts: [{
      id: 'wl-005',
      title: 'Jade Facial Roller',
      brand: 'Ritual Beauty',
      image: 'https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      rating: 4.7,
      reviewCount: 56,
      price: 32.0,
      category: 'Wellness'
    }, {
      id: 'sk-006',
      title: 'Nourishing Face Oil',
      brand: 'Ritual Beauty',
      image: 'https://images.unsplash.com/photo-1598662972299-5408ddb8a3dc?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      rating: 4.8,
      reviewCount: 67,
      price: 56.0,
      category: 'Skincare'
    }, {
      id: 'sk-003',
      title: 'Overnight Hydration Mask',
      brand: 'Pure Bloom',
      image: 'https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      rating: 4.9,
      reviewCount: 76,
      price: 38.0,
      originalPrice: 48.0,
      category: 'Skincare'
    }]
  }, {
    id: 'guide-003',
    title: 'Evening Wind-Down Ritual',
    subtitle: 'Create peace and prepare for restful sleep',
    description: 'Create a peaceful evening routine to promote better sleep and relaxation after a busy day.',
    image: 'https://images.unsplash.com/photo-1470259078422-826894b933aa?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    author: 'Maya Johnson',
    authorTitle: 'Sleep & Wellness Coach',
    authorImage: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80',
    readTime: '12 min read',
    publishDate: 'April 10, 2023',
    content: [{
      type: 'paragraph',
      text: "In our constantly connected world, the boundary between day and night, work and rest has become increasingly blurred. Creating an intentional evening wind-down ritual is essential for signaling to your body and mind that it's time to transition from the activity of the day to the restoration of sleep. This guide will help you design a personalized evening ritual that promotes relaxation, better sleep quality, and overall wellbeing."
    }, {
      type: 'heading',
      text: 'The Importance of an Evening Ritual'
    }, {
      type: 'paragraph',
      text: 'Research in sleep science has consistently shown that what we do in the hours before bed significantly impacts our sleep quality. An evening ritual helps regulate your circadian rhythm, reduce stress hormones like cortisol, and increase sleep-promoting hormones like melatonin. Beyond the physiological benefits, an evening ritual provides psychological closure to the day and creates a sense of peace before sleep.'
    }, {
      type: 'heading',
      text: 'Creating Your Evening Wind-Down Ritual'
    }, {
      type: 'paragraph',
      text: 'The most effective evening rituals begin 1-2 hours before your intended bedtime. Here are the key elements to consider incorporating:'
    }, {
      type: 'subheading',
      text: '1. Digital Sunset (60-90 minutes before bed)'
    }, {
      type: 'paragraph',
      text: 'Begin your wind-down by disconnecting from screens. The blue light emitted by phones, computers, and TVs suppresses melatonin production and keeps your brain in an alert state. Set a specific time to put away devices and switch to more calming activities. If you must use a device, use night mode or blue-light blocking glasses.'
    }, {
      type: 'subheading',
      text: '2. Create a Calming Environment (30 minutes before bed)'
    }, {
      type: 'paragraph',
      text: "Prepare your space for rest by dimming lights, reducing noise, and adjusting the temperature (ideally between 65-68°F or 18-20°C). Consider diffusing calming essential oils like lavender or chamomile, or using a linen spray on your bedding. This environmental shift signals to your brain that it's time to wind down."
    }, {
      type: 'subheading',
      text: '3. Evening Skincare Ritual (15-20 minutes before bed)'
    }, {
      type: 'paragraph',
      text: "Transform your skincare routine into a mindful ritual. Double cleanse to remove the day's impurities, apply serums and treatments, and finish with a nourishing night cream or facial oil. Focus on the sensory experience—the textures, scents, and feeling of caring for yourself. This can be a powerful way to transition from day to night."
    }, {
      type: 'subheading',
      text: '4. Relaxation Practice (10-15 minutes before bed)'
    }, {
      type: 'paragraph',
      text: 'Choose a calming activity that helps quiet your mind. This could be gentle yoga stretches, meditation, breathwork, reading a physical book (nothing too stimulating), journaling, or listening to soft music. The key is consistency—your brain will begin to associate this activity with the transition to sleep.'
    }, {
      type: 'subheading',
      text: '5. Reflection and Gratitude (5 minutes before bed)'
    }, {
      type: 'paragraph',
      text: "Take a few moments to reflect on your day with kindness and note three things you're grateful for. This practice helps release any lingering tension or worries and shifts your mindset to a positive state before sleep. You can do this mentally or write in a journal kept by your bedside."
    }, {
      type: 'heading',
      text: 'Tips for a Successful Evening Ritual'
    }, {
      type: 'list',
      items: ['Consistency is key – try to maintain similar timing each night', "Start with just 15-20 minutes if you're new to evening rituals", 'Avoid caffeine after 2pm and heavy meals within 3 hours of bedtime', 'Keep a notepad by your bed to jot down any thoughts or to-dos that might keep you awake', "If you can't fall asleep within 20 minutes, get up and do a quiet activity until you feel sleepy", 'Be patient – it may take 2-3 weeks to establish a new sleep pattern']
    }, {
      type: 'heading',
      text: 'Sample 30-Minute Evening Ritual'
    }, {
      type: 'paragraph',
      text: '8:30 PM: Digital devices away, dim lights\n8:35 PM: Evening skincare ritual\n8:45 PM: Light stretching or gentle yoga\n8:55 PM: Read a few pages of a book or practice meditation\n9:00 PM: Gratitude reflection and lights out'
    }, {
      type: 'paragraph',
      text: 'Remember that your evening ritual should feel nurturing rather than another set of tasks to complete. Approach it with an attitude of self-care and be willing to adjust as needed. Over time, your body and mind will learn to recognize these activities as cues for rest, making it easier to fall asleep and enjoy more restorative sleep throughout the night.'
    }],
    relatedProducts: [{
      id: 'wl-001',
      title: 'Lavender Sleep Mist',
      brand: 'Pure Bloom',
      image: 'https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      rating: 4.8,
      reviewCount: 92,
      price: 28.0,
      category: 'Wellness'
    }, {
      id: 'wl-006',
      title: 'Silk Sleep Mask',
      brand: 'Glow Theory',
      image: 'https://images.unsplash.com/photo-1618517047922-d18a5a36c109?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      rating: 4.8,
      reviewCount: 42,
      price: 38.0,
      category: 'Wellness'
    }, {
      id: 'sk-009',
      title: 'Retinol Night Repair Cream',
      brand: 'Glow Theory',
      image: 'https://images.unsplash.com/photo-1625772452859-1c03d5bf1137?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
      rating: 4.9,
      reviewCount: 95,
      price: 68.0,
      originalPrice: 78.0,
      category: 'Skincare'
    }]
  }];
  // Find the current guide
  const guide = guides.find(g => g.id === guideId);

  useEffect(() => {
    if (guide) {
      setPageTitle(guide.title);
    }
  }, [guide]);

  if (!guide) {
    return <div className="max-w-7xl mx-auto px-4 md:px-8 lg:px-12 py-12 text-center">
        <h1 className="font-serif text-2xl mb-4">Guide Not Found</h1>
        <p className="mb-6">
          The wellness guide you're looking for doesn't exist or has been
          removed.
        </p>
        <Link to="/wellness" className="bg-[#4a6b60] hover:bg-[#3d5a50] text-white px-6 py-3 rounded-md transition-colors">
          Back to Wellness
        </Link>
      </div>;
  }
  // Render content based on type
  const renderContent = (item: any, index: number) => {
    switch (item.type) {
      case 'paragraph':
        return <p key={index} className="text-base leading-relaxed mb-6">
            {item.text}
          </p>;
      case 'heading':
        return <h2 key={index} className="font-serif text-2xl text-[#4a4a4a] mb-4 mt-8">
            {item.text}
          </h2>;
      case 'subheading':
        return <h3 key={index} className="font-medium text-lg mb-3 mt-6">
            {item.text}
          </h3>;
      case 'list':
        return <ul key={index} className="list-disc pl-6 mb-6 space-y-2">
            {item.items.map((listItem: string, i: number) => <li key={i} className="text-base">
                {listItem}
              </li>)}
          </ul>;
      default:
        return null;
    }
  };
  return <div className="max-w-7xl mx-auto px-4 md:px-8 lg:px-12 py-12">
      {/* Breadcrumbs */}
      <div className="flex items-center text-sm mb-8">
        <Link to="/" className="text-gray-500 hover:text-[#4a6b60]">
          Home
        </Link>
        <ChevronRight size={14} className="mx-2 text-gray-400" />
        <Link to="/wellness" className="text-gray-500 hover:text-[#4a6b60]">
          Wellness
        </Link>
        <ChevronRight size={14} className="mx-2 text-gray-400" />
        <span className="text-[#4a4a4a]">Guides</span>
        <ChevronRight size={14} className="mx-2 text-gray-400" />
        <span className="text-[#4a4a4a]">{guide.title}</span>
      </div>

      {/* Guide Header */}
      <div className="mb-12">
        <h1 className="font-serif text-3xl md:text-4xl lg:text-5xl text-[#4a4a4a] mb-4">
          {guide.title}
        </h1>
        <p className="text-xl text-gray-600 mb-6">{guide.subtitle}</p>
        <div className="flex items-center justify-between flex-wrap gap-4">
          <div className="flex items-center">
            <img src={guide.authorImage} alt={guide.author} className="w-12 h-12 rounded-full object-cover mr-4" />
            <div>
              <p className="font-medium">{guide.author}</p>
              <p className="text-sm text-gray-500">{guide.authorTitle}</p>
            </div>
          </div>
          <div className="flex items-center space-x-6">
            <div className="flex items-center text-sm text-gray-500">
              <Clock size={16} className="mr-2" />
              <span>{guide.readTime}</span>
            </div>
            <div className="flex items-center text-sm text-gray-500">
              <BookOpen size={16} className="mr-2" />
              <span>Published {guide.publishDate}</span>
            </div>
          </div>
        </div>
      </div>

      {/* Featured Image */}
      <div className="mb-12">
        <img src={guide.image} alt={guide.title} className="w-full h-[500px] object-cover rounded-lg" />
      </div>

      {/* Guide Content */}
      <div className="flex flex-col lg:flex-row gap-12">
        <div className="lg:w-2/3">
          {guide.content.map((item, index) => renderContent(item, index))}
        </div>
        <div className="lg:w-1/3">
          <div className="bg-[#f3f0eb] p-6 rounded-lg sticky top-24">
            <h3 className="font-serif text-xl mb-6">Products Mentioned</h3>
            <div className="space-y-6">
              {guide.relatedProducts.slice(0, 3).map(product => <Link key={product.id} to={`/${product.category.toLowerCase()}/${product.id}`} className="flex items-center group">
                  <div className="w-20 h-20 rounded overflow-hidden flex-shrink-0">
                    <img src={product.image} alt={product.title} className="w-full h-full object-cover" />
                  </div>
                  <div className="ml-4">
                    <p className="text-xs uppercase tracking-wider text-[#4a6b60]">
                      {product.brand}
                    </p>
                    <h4 className="font-medium group-hover:text-[#4a6b60] transition-colors">
                      {product.title}
                    </h4>
                    <p className="text-sm">${product.price.toFixed(2)}</p>
                  </div>
                </Link>)}
            </div>
            <div className="mt-8 pt-6 border-t border-[#e8e5e0]">
              <h3 className="font-serif text-xl mb-4">More Guides</h3>
              <div className="space-y-4">
                {guides.filter(g => g.id !== guide.id).map(relatedGuide => <Link key={relatedGuide.id} to={`/wellness-guide/${relatedGuide.id}`} className="block group">
                      <h4 className="font-medium group-hover:text-[#4a6b60] transition-colors">
                        {relatedGuide.title}
                      </h4>
                      <p className="text-sm text-gray-500">
                        {relatedGuide.readTime}
                      </p>
                    </Link>)}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* CTA Section */}
      <div className="mt-16 bg-[#f3f0eb] p-8 md:p-12 rounded-lg">
        <div className="max-w-3xl mx-auto text-center">
          <h2 className="font-serif text-2xl md:text-3xl mb-4">
            Ready to Create Your Own Ritual?
          </h2>
          <p className="mb-8">
            Discover personalized product recommendations and ritual guides
            tailored to your specific needs and preferences.
          </p>
          <Link to="/the-ritual" className="inline-flex items-center bg-[#4a6b60] hover:bg-[#3d5a50] text-white px-6 py-3 rounded-md transition-colors">
            Explore The Ritual
            <ArrowRight size={16} className="ml-2" />
          </Link>
        </div>
      </div>
    </div>;
}